<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">用户列表</h1></div>
            </div>
            <div class=row>
                <div class="col-sm-10 col-sm-offset-1">
                    <a href="" class="btn btn-success btn-sm">添加</a>
                    <table class="table table-bordered">
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>工资</th>
                            <th>年龄</th>
                            <th>简介</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.salary}}</td>
                            <td>{{user.age}}</td>
                            <td>{{user.description}}</td>
                            <td>
                                <a href="javascript:;" class="btn btn-danger btn-sm" @click="delById(user.id)">删除</a>
                                <a href="javascript:;" class="btn btn-info btn-sm" @click="edit(user)">修改</a>
                            </td>
                        </tr>
                    </table>
                    <form>
                        <div class="form-group" v-show="user.id">
                            <label for="name">编号</label>
                            <input type="text" class="form-control" id="id" v-model="user.id" readonly="">
                        </div>
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="salary">工资</label>
                            <input type="text" class="form-control" v-model="user.salary" id="salary" placeholder="请输入工资">
                        </div>
                        <div class="form-group">
                            <label for="age">年龄</label>
                            <input type="email" class="form-control" v-model="user.age" id="age" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="description">简介</label>
                            <input type="text" class="form-control" v-model="user.description" id="description" placeholder="请输入简介">
                        </div>
                        <button type="button" class="btn btn-info" @click="saveOrUpdate">提交</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg: "study vue template",
            users:[],
            user:{
                id: '',
                name:'',
                salary:'',
                age:'',
                description:'',
            },
        },
        methods:{
            saveOrUpdate(){
                axios.post("http://127.0.0.1:8030/myuser/saveOrUpdate",this.user)
                .then(()=>{
                    this.user = {};
                    alert("添加或更新成功");
                    this.getAllMyUser();
                }).catch(()=>{
                    alert("添加失败");
                })
            },
            edit(user){
                this.user=user;
            },
            toUpdate(id){
                axios.get("http://127.0.0.1:8030/myuser/getOne/"+id).then((res)=>{
                    //alert(res.data.name);
                    this.user.id=res.data.id;
                    this.user.name=res.data.name;
                    this.user.salary=res.data.salary;
                    this.user.age=res.data.age;
                    this.user.description=res.data.description;
                }).catch((error)=>{
                    this.$message.error("系统错误");
                });

            },
            getAllMyUser(){
                axios.get("http://127.0.0.1:8030/myuser/getAll").then((res)=>{
                    this.users = res.data;
                }).catch((error)=>{
                    this.$message.error("系统错误");
                });
            },
            delById(id){
                axios.get("http://127.0.0.1:8030/myuser/delById/"+id).then((res)=>{
                    if(res == true){
                        alert("删除成功");
                        this.getAllMyUser();
                    }else{
                        alert("删除失败");
                    }
                }).catch((error)=>{
                    this.$message.error("系统错误");
                });
            },
        },
        created(){
            this.getAllMyUser();
        },
    });
</script>